如我們昨天所介紹的,以支援程度的角度來看,COLR/CPAL 規格的彩色字型可以獲得最廣的相容性;而除了顯示之外,也可以透過 CSS 的調整,對其顏色進行讀取和覆寫的操作。
雖然 SBIX、CBDT/CBLC、OpenType-SVG、COLR/CPAL 都是 OpenType 定義的彩色字型規格,但各個排版引擎與瀏覽器對他們的支援都不一樣,我們可以打開 Chromacheck 這個網頁來檢查瀏覽器對彩色字型的相容性。
以最常見的桌面版 Chrome 而言,應該除了 OpenType-SVG 之外,其他都是綠色的。不過,如果你是使用 Safari,或是 iPhone 和 iPad 上的任何瀏覽器(包含 Safari 和第三方瀏覽器——畢竟他們實際上都是 WebKit 引擎的套皮),則會顯示不支援 COLRv1 和 CBDT/CBLC 格式。
不難發現,其實 COLR/CPAL v0 的泛用性是最高的。
在這裡,我們以 David Jonathan Ross 設計的 Rocher Color 這套字型為例。
藉由 Wakamai Fond 這個網站的分析,我們可以知道 Rocher Color 是一套擁有兩個可變軸、11 個基本色版、每種色盤擁有四個顏色的 COLR/CPAL v0 字型(This font has COLR color glyphs. Your browser supports this format. It has 11 color palettes of 4 colors.)
那麼,使用者要怎麼使用這 11 個基本色盤呢?我們可以透過 css 的 @font-palette-values
規則去指定,例如預設的色盤就是:
.class {
font-palette: --Default;
}
@font-palette-values --Default {
font-family: Rocher;
base-palette: 0;
}
如果要選第一個色版(粉紅配色)的話:
.class {
font-palette: --Pink;
}
@font-palette-values --Pink {
font-family: Rocher;
base-palette: 1;
}
若是設計師配好的基本色版裡面都沒有喜歡的樣子呢?我們可以透過 override-colors 的方法強制覆寫某個圖層的顏色,如果要覆寫「第一個色版裡的第二組顏色」,將其設為白色(#FFFFFF)的話,可以透過:
.class {
font-palette: --PinkPartOverride;
}
@font-palette-values --PinkPartOverride {
font-family: Rocher;
base-palette: 1;
override-colors: 2 #FFFFFF;
}
萬一完全都想換掉?透過類似的方法,可以完全的覆寫顏色,此時要選哪一個當基本色版就都沒關係了,反正顏色都會被換掉:
.class {
font-palette: --OverrideAll;
}
@font-palette-values --OverrideAll {
font-family: Rocher;
override-colors:
0 #2C4251,
1 #D16666,
2 #B6C649,
3 #1CAD70;
}
對 COLR/CPAL 規格的彩色字體而言,字符不一定得全部套用同一種顏色,反而可以在設計時透過圖層設色的概念,為使用者帶來了分層上色的可能,獲得更加璀璨繽紛的色彩。
》Today's demo code: https://codepen.io/chingru/pen/abPaGMw